<%--
  Created by IntelliJ IDEA.
  User: 范军建
  Date: 2022/4/18
  Time: 11:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Login</title>
    <link rel="stylesheet" href="css/login.css" type="text/css">
</head>
<body>
<script type="text/javascript">
    var http_request = "<%=request.getContextPath() %>";
</script>
<%--共同的顶部--%>
<jsp:include page="head.jsp"></jsp:include>
<div class="d9" style="display: flex;justify-content: center">
    <a style="text-align: center;font-size: 20px;padding-top: 41px;margin-left: -150px;text-decoration: none;color: #333333"
       href="register.jsp">注册</a>
    <p style="text-align: center;font-size: 20px;padding-top: 20px;margin-left: 50px">|</p>
    <a style="text-align: center;font-size: 20px;padding-top: 41px;margin-left: 50px ;text-decoration: none;color: #333333"
       href="login.jsp">登&nbsp;录</a>
</div>
<div class="d6">

    <div class="d7">
        <form>
            <ul>
                <li style="border-bottom: 1px solid #999;">
                    <label>昵称：</label>
                    <input type="text" id="zh" name="username" maxlength="11" pattern="^[1][3,4,5,7,8][0-9]{9}$"
                           required style="border: none;background: rgba(0,0,0,0);"/>
                    <span id="s1" style="font-size: 9px"></span>
                </li>

                <li style="border-bottom: 1px solid #999;">
                    <label>密码：</label>
                    <input type="password" id="mm" name="password" maxlength="6" required
                           style="border: none;background: rgba(0,0,0,0);"/>
                    <span id="s2" style="font-size: 9px"></span>
                </li>
                <li>
                    <label>确认密码：</label>
                    <input type="password" id="mm1" name="password" maxlength="6" required
                           style="border: none;background: rgba(0,0,0,0);"/>
                    <span id="s3" style="font-size: 9px"></span>
                </li>
            </ul>
        </form>

        <p>登录即代表你同意美食天下《<a class="a20" href="#">用户协议</a>》和《<a class="a20" href="#">隐私政策</a>》</p>
        <button onclick="reg()" value="" style="width: 300px;background-color: red;height: 40px">点击注册</button>
    </div>


    <div class="d8">
        <img src="image/app1.png" style="width: 110px;height: 100px;"/>
        <p class="p1">扫描二维码下载客户端</p>
        <span>
            <a href="" title="QQ登录"><img src="image/q1%20.png" style="width: 30px;height: 30px"/></a>
            <a href="" title="微信登录"><img src="image/wb1.png" style="width: 30px;height: 30px"/></a>
            <a href="" title="微博登录"><img src="image/wx1.png" style="width: 30px;height: 30px"/></a>
        </span>
    </div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    function reg() {
        var username = $("#zh").val();
        var password = $("#mm").val();
        var password1 = $("#mm1").val();
        if (password != password1) {
            alert("密码不一致,请重新输入")
        } else {
            $.ajax({
                //几个参数需要注意一下
                dataType: "text",
                url: "/hello",
                method: "post",
                data: {
                    username: username,
                    password: password
                },
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.indexOf("1") != -1) {
                        alert("恭喜您！注册成功！前往登录页面。。。")
                        window.location.href = http_request + "/login.jsp"
                    } else {
                        window.location.href = http_request + "/register.jsp"
                    }

                },
                error: function () {
                    alert("异常！");

                }
            });
        }


    }

    $(document).ready(function () {
        $("#zh").blur(function () {
            var uname = $(this).val();
            if (uname == "") {
                $("#s1").html("昵称不能为空");
            } else {
                $.ajax(
                    {
                        url: "/username",//找用户名匹配的上吗
                        data: {username1: uname},
                        method: "get",
                        async: true,
                        dataType: "text",
                        success: function (data) {
                            $("#s1").html(data)
                        },
                        error: function (data) {

                        }
                    }
                )
            }
        })

        $("#mm").blur(function () {
            var val = $("#zh").val();
            var upass = $(this).val();
            if (upass == "") {
                $("#s2").html("密码不能为空");
            } else {
                $.ajax(
                    {
                        url: "/password",//找密码匹配的上吗
                        data: {
                            usn: val,
                            password1: upass
                        },
                        method: "get",
                        async: true,
                        dataType: "text",
                        success: function (data) {
                            // console.log("aaaaaaa")
                            // var text =data.responseText;
                            // console.log(data)
                            // alert(data)
                            $("#s2").html(data);
                        },
                        error: function (data) {
                        }
                    }
                )
            }
        })
    })


</script>
</body>
</html>